<template>
    <div class="payInf">
          <page-header @toLastPage="toLastPage">
      <template v-slot:title>
      支付
      </template>
      <template v-slot:right>
        <div>
          ...
        </div>
      </template>
    </page-header>
    <div class="pay flex">
        <div class="paypal f-center" @click="unFinishEvent">
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shoufukuan1"></use>
            </svg>
            <div class="text">
                收付款
            </div>
        </div>
        <div class="packet f-center" @click="toPayPage">
             <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-qianbao"></use>
            </svg>
            <div class="text">
                <div>钱包</div>
                <div class="money">¥{{userInf}}</div>
            </div>
        </div>
    </div>
    <div v-for="(item,index) in iconListArr" :key="index">
        <icon-list :data = item @iconClickEvent='iconClickEvent'></icon-list>
    </div>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import iconList from '../common/iconList';
import {Meteor} from 'meteor/meteor';
import { user } from '../../../api/collections/index';
export default {
    components:{
        pageHeader,
        iconList
    },
       meteor: {
    $subscribe: {
      'userInf': []
    },
    userInf(){
        const getUser = user.findOne({_id:this.id})
        if(getUser){
           return Number(getUser.pay).toFixed(2) 
        }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
    },
    },
    methods:{
        toLastPage(){
            this.$router.go(-1)
        },
        toPayPage(){
            this.$router.push('/payPage/'+this.id)
        },
        unFinishEvent(){
            this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 })
        },
        iconClickEvent(){
            this.unFinishEvent()
        }
    },
    data() {
        return {
            id:this.$route.params.id,
            iconListArr:[
                {
                    title:'金融理财',
                    iconList:[{
                        icon:'#icon-xinyongqiahuankuan',
                        text:'信用卡还款',
                        color:'#24A971'
                    },{
                        icon:'#icon-licaitong',
                        text:'理财通',
                        color:'#0EAEF1'
                    }]
                },{
                    title:'生活服务',
                    iconList:[{
                        icon:'#icon-shoujichongzhi',
                        text:'手机充值',
                        color:'#1085F2'
                    },{
                        icon:'#icon-shenghuojiaofei',
                        text:'生活缴费',
                        color:'#13A15E'
                    },{
                        icon:'#icon-qbichongzhi',
                        text:'Q币充值',
                        color:'#299ABF'
                    },{
                        icon:'#icon-chengshifuwu1',
                        text:'城市服务',
                        color:'#27AF70'
                    },{
                        icon:'#icon-tengxungongyi',
                        text:'腾讯公益',
                        color:'#E45C64'
                    },{
                        icon:'#icon-yiliaojiankang',
                        text:'医疗健康',
                        color:'#E99B4A'
                    },{
                        icon:'#icon-jiankangma',
                        text:'防疫健康码',
                        color:'#32AC76'
                    }]
                },
                {
                    title:'交通出行',
                    iconList:[{
                        icon:'#icon-chezhuchuhangfuwu',
                        text:'出行服务',
                        color:'#1DA8E1'
                    },{
                        icon:'#icon-huochepiaojipiao',
                        text:'火车票机票',
                        color:'#10BE64'
                    },{
                        icon:'#icon-didichuhang',
                        text:'滴滴出行',
                        color:'#F49A33'
                    },{
                        icon:'#icon-jiudian',
                        text:'酒店',
                        color:'#0BB862'
                    }]
                },
                {
                    title:'购物消费',
                    iconList:[{
                        icon:'#icon-jingdong',
                        text:'京东购物',
                        color:'#DC5F64'
                    },{
                        icon:'#icon-meituan2',
                        text:'美团外卖',
                        color:'#F7A042'
                    },{
                        icon:'#icon-dianyingyanchusaishi',
                        text:'电影演出赛事',
                        color:'#F74F4E'
                    },{
                        icon:'#icon-dianpingmeituantuangou',
                        text:'美团团购',
                        color:'#FBA249'
                    },{
                        icon:'#icon-pinduoduo',
                        text:'拼多多',
                        color:'#F5555A'
                    },{
                        icon:'#icon-mogujie',
                        text:'蘑菇街女装',
                        color:'#F55351'
                    },{
                        icon:'#icon-weipinhui',
                        text:'唯品会特卖',
                        color:'#E94D86'
                    },{
                        icon:'#icon-ziyuanw',
                        text:'转转二手',
                        color:'#F75053'
                    },{
                        icon:'#icon-beike',
                        text:'贝壳找房',
                        color:'#1DAEF3'
                    }]
                },
            ]
        }
    },
}
</script>
<style scoped>
.payInf{
    padding: .3rem;
}
.pay{
    margin-top: 1.8rem;
    background-color: #2EAD6A;
    color: #fff;
    padding: .6rem;
    font-size: .6rem;
    border-radius: .3rem;
}
.pay .icon{
    font-size: 1.5rem;
    margin-bottom: .3rem;
}
.paypal{
    width: 50%;
    flex-direction: column;
    text-align: center;
}
.packet{
    width: 50%;
    flex-direction: column;
    text-align: center;
    margin-top: .7rem;
}
.packet .money{
    font-size: .5rem;
    color: rgba(255, 255, 255, .5);
    margin-top: .1rem;
}
</style>